<template>
  <div>
    <el-upload
      action="#"
      list-type="picture-card"
      :on-remove="handleRemove"
      :http-request="UploaddFn"
      :file-list="fileList"
      :limit="limitImg"
      :class="{show:fileList.length>limitImg-1}"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-progress v-if="yincan" type="circle" :percentage="percent" class="jindutiao" />
  </div>
</template>

<script>
var COS = require('cos-js-sdk-v5')

// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKIDymKbbKmysWtzoMddMoyrUqwmMfhSxA6l',
  SecretKey: 'PYPzIK5ZmiNlrgEVVEgrmQovlKcdNq1w'
})
export default {
  props: {
    limitImg: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      fileList: [],
      yincan: false,
      percent: 0
    }
  },
  methods: {
    // 删除
    handleRemove(file, fileList) {
      this.fileList.splice(this.fileList.findIndex((item) => item.uid === file.uid), 1)
      this.percent = 0
    },
    // 添加图片  覆盖默认的上传行为，可以自定义上传的实现
    UploaddFn(file) {
      this.yincan = true

      this.fileList.push({ url: '' })
      // console.log(11, file)
      cos.putObject({
        Bucket: 'hr-project-75-1312551896', /* 必须 */
        Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */
        Key: 'Date.new()', /* 必须 */
        StorageClass: 'STANDARD',
        Body: file.file, // 上传文件对象
        onProgress: (progressData) => {
          // console.log(JSON.stringify(progressData))
          this.percent = progressData.percent * 100
        }
      }, (err, data) => {
        if (err) {
        //   console.log(11111)
          return this.$message.error('上传失败')
        }
        this.fileList[this.fileList.length - 1].url = 'http://' + data.Location
        console.log(5252, this.fileList)
        const Timeout = setTimeout(() => {
          this.yincan = false
          clearTimeout(Timeout)
        }, 1000)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
    .el-progress{
       position: absolute;
       left: 12px;
       top: 12px;
  }

.show{
    .el-upload--picture-card{
     display: none;
    }
}
</style>
